<template>
	<div>
		<div class="nav-tab">
			<div
				class="nav-tab-item"
				:class="{ active: activeIndex.includes(index),nowactive:nowActive ==index}"
				v-for="(item, index) in tabs"
				:key="index"
				@click="handleTabClick(item, index,2)"
			>
				<div class="item-box fc">
					<div class="circle fc">
						<icon-check-small size="25" :strokeWidth="5" strokeLinejoin="miter" strokeLinecap="butt" />
					</div>
					<div class="line"></div>
				</div>
				<div class="title">{{ item.label }}</div>
				<div class="tip">{{ item.tip }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">

const props = defineProps<{
  modelValue?:string|number
	tabs: any[]
  link?:boolean
}>()

const emit = defineEmits(['update:modelValue'])
const activeIndex = ref([])
const nowActive = ref(0)
const handleTabClick = (item:any,index: number,type:number) => {
   if(!props.link && type ==2) return false
	let arr:any = []
	for (let i = 0; i <= index; i++) {
		arr.push(i)
	}
  activeIndex.value  = arr
  nowActive.value = index
   emit('update:modelValue',item.value)
}

watch(()=>props.modelValue,(value)=>{
  const index = props.tabs.findIndex((item:any)=>item.value === value)
  if(index !==-1) {
    handleTabClick(props.tabs[index],index,1)
  }
},{
  immediate:true
})
</script>

<style scoped lang="scss">
.nav-tab {
	width: 100%;
	display: flex;
  .nowactive {
    &:not(:last-child):after {
			content: '';
      width: 88% !important;
      border-top-right-radius: 10px !important;
			border-bottom-right-radius: 10px !important;
		}
  }
	.active {
		.circle {
      color: #4787f0;
			background-color: #4787f0;
			color: #fff !important;
      border: 5px solid #fff;
		}
		&:not(:last-child):after {
			content: '';
			background: #4787f0 !important;
      width: 92%;
      border-radius:0;
		}
	}
	&-item {
		flex: 1;
		text-align: center;
		position: relative;
		&:not(:last-child):after {
			content: '';
			position: absolute;
			top: 0;
			left: calc(50% + 15px);
			transform: translateY(45%);
			width: 90%;
			height: 20px;
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
			background: #f4f5fc;
      z-index:0;
		}
		.item-box {
			width: 100%;
		}
		.circle {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border: 5px solid #F4F6FA;
			box-sizing: border-box;
			color: #f4f5fc;
			font-weight: bold;
      position: relative;
      z-index:1;
		}

		.title {
			margin-top: 20px;
			font-family: 'Microsoft YaHei Bold';
			font-weight: 700;
			font-size: 20px;
			color: #1c1c28;
			width: 100%;
		}
		.tip {
			padding-top: 5px;
			font-family: 'Microsoft YaHei';
			font-weight: 400;
			font-size: 14px;
			color: #000;
		}
	}
}
</style>
